<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover,shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="五绝传说">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>五绝传说</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
      }
      
      #app {
        width: 100%;
        min-height: 100vh;
      }
      
      /* 加载动画 */
      .loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
      }
      
      .loading-spinner {
        width: 50px;
        height: 50px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top: 3px solid #ffffff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      .loading-text {
        color: #ffffff;
        margin-top: 20px;
        font-size: 16px;
      }
      
      .progress-bar {
        width: 200px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        margin-top: 20px;
        overflow: hidden;
      }
      
      .progress-fill {
        height: 100%;
        background: #ffffff;
        width: 0%;
        transition: width 0.3s ease;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but 五绝传说 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div class="loading" id="initialLoading">
        <div>
          <div class="loading-spinner"></div>
          <div class="loading-text" id="loadingText">初始化游戏资源...</div>
          <div class="progress-bar">
            <div class="progress-fill" id="progressFill"></div>
          </div>
        </div>
      </div>
    </div>
    
    <script>
      // 资源加载进度模拟和监听
      (function() {
        let progress = 0;
        const progressFill = document.getElementById('progressFill');
        const loadingText = document.getElementById('loadingText');
        const initialLoading = document.getElementById('initialLoading');
        
        const loadingSteps = [
          { progress: 20, text: '加载游戏配置...' },
          { progress: 40, text: '初始化游戏引擎...' },
          { progress: 60, text: '加载游戏资源...' },
          { progress: 80, text: '准备游戏界面...' },
          { progress: 100, text: '启动完成！' }
        ];
        
        let currentStep = 0;
        
        function updateProgress() {
          console.log('updateProgress', progress, currentStep);
          // 直接设置进度为100%，跳过等待时间
          progress = 100;
          progressFill.style.width = '100%';
          loadingText.textContent = '启动完成！';
          
          // 立即触发Vue应用的初始化完成事件
          window.dispatchEvent(new CustomEvent('resourcesLoaded'));
          
          // 立即隐藏初始加载界面
          initialLoading.style.opacity = '0';
          setTimeout(() => {
            initialLoading.style.display = 'none';
          }, 300);
        }
        
        // 页面加载完成后开始进度更新
        if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', () => {
            setTimeout(updateProgress, 300);
          });
        } else {
          setTimeout(updateProgress, 300);
        }
        
        // 监听所有资源加载完成
        window.addEventListener('load', () => {
          // 确保最后一步完成
          console.log('load', progress, currentStep);
          if (progress < 100) {
            progress = 100;
            progressFill.style.width = '100%';
            loadingText.textContent = '启动完成！';
          }
        });
      })();
    </script>
    
    <!-- built files will be auto injected -->
  </body>
</html>